<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/css/看板/style.css">
    <script src="src/js/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="src/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="src/js/天气.js"></script>
    <link rel="stylesheet" href="src/css/天气.css">
    <link rel="stylesheet" href="src/css/表格/表格.css">
    <link rel="stylesheet" href="src/css/mvp.css">
    <link href="src/css/看板/css.css" rel="stylesheet" type="text/css" media="all"/>
    <title>牛客周赛大数据展示</title>
    <style>
        @media screen and (max-aspect-ratio: 1/1) {
            #left1, #left2, #left3 {
                position: absolute; /* 添加这一行以确保top和left属性生效 */
                top: 60px;
                height: 20%;
            }

            #left1 {
                left: 0;
            }

            #left2 {
                left: 33.33%;
            }

            #left3 {
                left: 66.66%;
            }

            #center {
                position: absolute;
                top: 25%;
                left: 0;
                bottom: 25%;
                height: 50%;
                width: 100%;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            #center-main {
                position: absolute;
                left: 20px;
                right: 20px;
                top: 0;
                bottom: 0;
                width: auto;
            }

            #center1, #center2 {
                left: 0;
                right: 0;
                bottom: 0;
            }

            #center1 {
                width: auto;
                height: 15%;
            }

            #center2 {
                top: 15%;
                height: 30%;
                width: auto;
            }

            #right1, #right2, #right3 {
                top: 66.6%;
                height: 20%;
                bottom: 0;
            }

            #right1 {
                right: 0;
            }

            #right2 {
                right: 33.33%;
            }

            #right3 {
                right: 66.66%;
            }

            #biao {

            }
        }
    </style>

</head>

<body style="overflow: hidden;" class="fill-parent" dg-chart-auto-resize="true"
      dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
      dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#142233'}">
<div class="head">
    <div class="title"><label>研发中心-牛客周赛 Round </label></div>
</div>
<div class="content">
    <div class="layout layout-left-top" id="left1">
        <div class="panel panel-bg no-title-bg">
            <div class="title"><label>本周分数分布</label></div>
            <!--<div class="weather-box" style="width: 100%; height: 95%">
                <div class="data" style="transform: scale(5);">
                    <p class="time" id="time">14:32:51</p>
                    <p id="date"><span>2024/11/7</span><span>pm</span><span>周4</span></p>
                </div>
                <div class="weather" style="transform: scale(5);">
                    <img id="weatherImg" src="src/imges/weather/weather_img01.png" alt="">
                    <div id="weather">
                        <p class="active">多云</p>
                        <p>16-22℃</p>
                        <p>河池市宜州区</p>
                    </div>
                </div>
            </div>-->
            <div id="chart_1" class="chart" style="width:auto;height: 100%;"></div>
        </div>
    </div>
    <div class="layout layout-left-center" id="left2">
        <div class="panel">
            <div class="title"><label>本周题目分数分布情况</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxbott" class="purightboxbottcont" style="width: 90% ; height: 95%"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-left-bottom" id="left3">
        <div class="panel">
            <div class="title"><label>双周提交对比</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="pumiddboxtbott1" class="fl pumiddboxtbott1cont"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-center" id="center">
        <div class="layout layout-center-main" id="center-main">
            <div class="layout layout-center-top" id="center1">
                <!-- MVP展示模块 -->
                <div class="mvp-container">
                    <!-- 本周MVP -->
                    <div class="mvp-card current-week">
                        <div class="mvp-header">
                            <h3 style="font-family: 华文楷体,serif" class="current-week-title">🏆 本周MVP</h3>
                            <span style="font-family: 华文楷体,serif" class="date-range current-week-range">(进步之星)</span>
                        </div>
                        <div class="mvp-content">
                            <div class="avatar">
                                <img src="src/imges/mvp/mvp.png" alt="本周MVP">
                            </div>
                            <div class="mvp-info">
                                <div class="name current-week-name"></div>
                                <div class="department current-week-department"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 本周最佳 -->
                    <div class="mvp-card last-week">
                        <div class="mvp-header">
                            <h3 style="font-family: 华文楷体,serif" class="last-week-title">🎖️ 本周最佳</h3>
                            <span style="font-family: 华文楷体,serif" class="date-range last-week-range">(荣耀王者)</span>
                        </div>
                        <div class="mvp-content">
                            <div class="avatar">
                                <img src="src/imges/mvp/mvp5.png" alt="本周最佳">
                            </div>
                            <div class="mvp-info">
                                <div class="name last-week-name"></div>
                                <div class="department last-week-department"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layout layout-center-bottom" id="center2">
                <div class="panel no-title-bg" style="width: auto;height: auto">
                    <div class="title" style="width: auto;height: auto"><label>本周总览 </label><a
                            href="src/Excel/niu.xlsx"
                            download
                            style="color: #cce198"><span
                            style="font-size: 11px">⇒表格下载 EX to Table</span></a></div>
                    <div class="chart" dg-chart-widget="" style="width: auto;height: auto">
                        <div class="right_cage" style="float: left; width: 100%;height: 100%;" id="gundongtiao">
                            <div class="dataAllBorder01 cage_cl check_increase"
                                 style="width: 100%;height: 100%; margin-top: 1.5% !important;">
                                <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 30px">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr style="background: rgb(3 30 113)">
                                            <th style="width: 4%">排</th>
                                            <th style="width: 11%">班级</th>
                                            <th style="width: 9%">姓名</th>
                                            <th style="width: auto">牛客名称</th>
                                            <th style="width: 10%">牛客 id</th>
                                            <th style="width: 7%">名次</th>
                                            <th style="width: 10%">学校</th>
                                            <th style="width: 5%">AC</th>
                                            <th style="width: 7%">总分</th>
                                            <th style="width: 12%">时间</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 100%"
                                     id="over_hide">
                                    <table class="table table-bordered" id="myTable" style="width: 100%"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-top" id="right1">
        <div class="panel">
            <div class="title"><label>本周提交分布玫瑰图</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxtop" class="purightboxtopcont right_tu"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-center" id="right2">
        <div class="panel">
            <div class="title"><label>近期参与人数</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxmidd" class="purightboxmiddcont right_tu"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-bottom" id="right3">
        <div class="panel">
            <div class="title"><label>上周成绩比较</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div class="right_cage" style="float: left; width: 100%;height: 100%;" id="gundongtiao_ringht">
                    <div class="dataAllBorder01 cage_cl check_increase"
                         style="width: 100%;height: 100%; margin-top: 1.5% !important;">
                        <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 10%">
                            <table class="table table-bordered">
                                <tr style="background: rgb(3 30 113)">
                                    <th style="width: 8%">排</th>
                                    <th style="width: 8%">dp</th>
                                    <th style="width: 25%">班级</th>
                                    <th style="width: 20%">姓名</th>
                                    <th style="width: auto">总分</th>
                                    <th style="width: 20%">时间</th>
                                </tr>
                            </table>
                        </div>
                        <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 80%"
                             id="over_hide_right">
                            <table class="table table-bordered" id="myTable2"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!--数据*/*/*/*￥#&1--><!--
<script type="text/javascript">
    const num= 73;
    const left2= [{value:220.00,name: 'A'},
        {value:115.00,name: 'B'},
        {value:0.00,name: 'C'},
        {value:10.00,name: 'D'},
        {value:23.81,name: 'E'},
        {value:9.09,name: 'F'},
        {value:0.00,name: 'G'}];
    const left3_data1= ['12','5','3','1','0','0','0'];
    const left3_data2= ['5','3','1','1','1','1','0'];
    const left3_data3= ['-7','-2','-2','0','1','1','0'];
    const center1= [
        {value: 220.00,name:'A',itemStyle: {normal: {color:'#f845f1'}}},
        {value: 115.00,name:'B',itemStyle: {normal: {color:'#ad46f3'}}},
        {value: 0.00,name:'C',itemStyle: {normal: {color:'#5045f6'}}},
        {value: 10.00,name:'D',itemStyle: {normal: {color:'#4777f5'}}},
        {value: 23.81,name:'E',itemStyle: {normal: {color:'#44aff0'}}},
        {value: 9.09,name:'F',itemStyle: {normal: {color:'#45dbf7'}}},
        {value: 0.00,name:'G',itemStyle: {normal: {color:'#f6d54a'}}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}}];
    const center2= [
        ['1','计技222','吴玉海','吴玉海','206578392','586','河池学院','2','192.90','00:41:02'],
        ['2','软件231','陈礼孝','莱因赖因','619768191','997','河池学院','1','65','00:57:30'],
        ['3','软件222','黎珊珊','彩塘','542981108','1053','河池学院','1','50','00:11:08'],
        ['4','计技中221','卢永华','阳光as','445291084','1053','河池学院','1','50','01:57:37'],
        ['5',' 计技 231',' 吴鹃芳 ','zxcvbnm678','466478601','1140','河池学院','0','20','01:11:42']
    ];
    const right1= [
        {value: 5,name: 'A'},
        {value: 3,name: 'B'},
        {value: 1,name: 'C'},
        {value: 1,name: 'D'},
        {value: 1,name: 'E'},
        {value: 1,name: 'F'},
        {value: 0,name: 'G'}];
    const right2_data1= ['67周','68周','69周','70周','71周','72周','73周'];
    const right2_data2= [23,31,28,29,12,12,5];
    const right3= [
        ['1','⌀','软件232','邱帥銘','185','01:47:21'],
        ['2','⇩','软件222','黎珊珊','180','01:42:18'],
        ['3','⌀','计技222','李佳蔚','180','01:54:59'],
        ['4','⌀','计技中221','农鑫盛','150','01:40:07'],
        ['5','⌀','计技222','杨思婷','145','01:30:37'],
        ['6','⌀','计技中221','陆明锐','50','00:38:01'],
        ['7','⌀',' 软件 231',' 罗茸丹 ','50','01:07:39'],
        ['8','⇪','计技中221','卢永华','50','01:29:24'],
        ['9','⌀','技计中221','罗志斌','50','01:55:54'],
        ['10','⌀','计技中221','吴成锫','50','01:56:55'],
        ['11','⌀',' 软件 242',' 桂瑞杰 ','25','00:48:37'],
        ['12','⇪',' 计技 231',' 吴鹃芳 ','10','01:57:41']
    ];
</script>-->

<script type="text/javascript">
    const num= 86;
    const left2= [{value:950.00,name: 'A'},
        {value:857.16,name: 'B'},
        {value:765.00,name: 'C'},
        {value:70.00,name: 'D'},
        {value:0.00,name: 'E'},
        {value:0.00,name: 'F'},
        {value:0.00,name: 'G'}];
    const left3_data1= ['19','17','14','10','3','1','0'];
    const left3_data2= ['19','13','8','5','0','1','0'];
    const left3_data3= ['0','-4','-6','-5','-3','0','0'];
    const center1= [
        {value: 950.00,name:'A',itemStyle: {normal: {color:'#f845f1'}}},
        {value: 857.16,name:'B',itemStyle: {normal: {color:'#ad46f3'}}},
        {value: 765.00,name:'C',itemStyle: {normal: {color:'#5045f6'}}},
        {value: 70.00,name:'D',itemStyle: {normal: {color:'#4777f5'}}},
        {value: 0.00,name:'E',itemStyle: {normal: {color:'#44aff0'}}},
        {value: 0.00,name:'F',itemStyle: {normal: {color:'#45dbf7'}}},
        {value: 0.00,name:'G',itemStyle: {normal: {color:'#f6d54a'}}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}}];
    const center2= [
        ['1','计技222','莫树生','mac落暮','522449800','672','河池学院','3','340','01:15:30'],
        ['2','计技231','农阳晨','Maou逍遥','742060430','708','河池学院','3','330','01:47:29'],
        ['3','计技222','李佳蔚','diligent的懒羊羊','222917009','869','河池学院','3','300','01:42:59'],
        ['4','软件222','黎珊珊','彩塘','542981108','869','河池学院','3','300','01:44:50'],
        ['5','计技222','杨思婷','yy耶斯','703497972','869','河池学院','3','300','01:45:35'],
        ['6','软件232','潘昊','潘昊ph','457352654','1263','河池学院','2','157.50','01:25:23'],
        ['7','计技232','卢春志','Luchunzhi','817516312','1311','河池学院','2','150','00:36:02'],
        ['8','计技231','杨孙贤','杨孙贤','517552178','1311','河池学院','2','150','01:52:54'],
        ['9','大数据232','王恩婷','云沫wet','842682522','1862','河池学院','1','71.79','01:19:31'],
        ['10','计技242','余滨海','ql只会c','158857959','1869','河池学院','1','64.29','00:40:02'],
        ['11','计技222','谢伟鹏','胡图图写编程','341966389','1869','河池学院','1','64.29','01:13:36'],
        ['12','计技231','吴鹃芳','zxcvbnm678','466478601','1869','河池学院','1','64.29','01:24:12'],
        ['13','软件242','唐博鸿','鸿翔','587590858','2028','河池学院','1','50','00:02:10'],
        ['14','计技中221','谢业棋','小新_同学','697120350','2028','河池学院','1','50','00:03:25'],
        ['15','计技中222','覃健庭','NPC_of_EarthOnline','726623220','2028','河池学院','1','50','00:04:26'],
        ['16','计技232','莫光勋','fun_sun','95434155','2028','河池学院','1','50','00:05:28'],
        ['17','计技231','雷世维','雷世维','911030757','2028','河池学院','1','50','00:07:17'],
        ['18','计技中221','卢永华','阳光as','445291084','2028','河池学院','1','50','00:58:03'],
        ['19','计技中221','文泽浩','byhui','245238204','2028','河池学院','1','50','01:09:56']
    ];
    const center2_yidong= [
        ['1','计技222','莫树生','3','340'],
        ['2','计技231','农阳晨','3','330'],
        ['3','计技222','李佳蔚','3','300'],
        ['4','软件222','黎珊珊','3','300'],
        ['5','计技222','杨思婷','3','300'],
        ['6','软件232','潘昊','2','157.50'],
        ['7','计技232','卢春志','2','150'],
        ['8','计技231','杨孙贤','2','150'],
        ['9','大数据232','王恩婷','1','71.79'],
        ['10','计技242','余滨海','1','64.29'],
        ['11','计技222','谢伟鹏','1','64.29'],
        ['12','计技231','吴鹃芳','1','64.29'],
        ['13','软件242','唐博鸿','1','50'],
        ['14','计技中221','谢业棋','1','50'],
        ['15','计技中222','覃健庭','1','50'],
        ['16','计技232','莫光勋','1','50'],
        ['17','计技231','雷世维','1','50'],
        ['18','计技中221','卢永华','1','50'],
        ['19','计技中221','文泽浩','1','50']
    ];
    const right1= [
        {value: 19,name: 'A'},
        {value: 13,name: 'B'},
        {value: 8,name: 'C'},
        {value: 5,name: 'D'},
        {value: 0,name: 'E'},
        {value: 1,name: 'F'},
        {value: 0,name: 'G'}];
    const right2_data1= ['80周','81周','82周','83周','84周','85周','86周'];
    const right2_data2= [4,4,3,3,13,19,19];
    const right3= [
        ['1','⇩','软件232','潘昊','541.67','01:32:53'],
        ['2','⊜','计技231','农阳晨','541.67','01:55:59'],
        ['3','⇩','计技232','卢春志','500','00:54:32'],
        ['4','⇪','计技222','李佳蔚','360','01:22:53'],
        ['5','⇪','软件222','黎珊珊','360','01:27:05'],
        ['6','⇪','计技222','杨思婷','340','01:18:04'],
        ['7','⇩','计技242','余滨海','330','00:32:41'],
        ['8','⌀','计技222','吴玉海','302.50','01:59:12'],
        ['9','⌀','计技231','石才尚','300','01:06:56'],
        ['10','⇪','计技231','杨孙贤','275','01:43:58'],
        ['11','⇪','计技222','莫树生','225','00:48:05'],
        ['12','⇩','计技232','莫光勋','210','01:38:10'],
        ['13','⇪','大数据232','王恩婷','170','01:18:19'],
        ['14','⇩','计技231','雷世维','150','00:14:32'],
        ['15','⌀','计技241','班花宇','150','01:29:16'],
        ['16','⇪','计技231','吴鹃芳','55','01:22:09'],
        ['17','⇪','计技中221','谢业棋','50','00:05:49'],
        ['18','⌀','软件242','桂瑞杰','50','00:32:03'],
        ['19','⇪','计技222','谢伟鹏','50','01:59:58']
    ];
</script>
<!--数据*/*/*/*￥#&2-->
<script>
    // 使用 find 方法查找第一个包含 ⇪ 的元素
    const firstElementWithUpArrow = right3.find(item => item.includes('⇪'));

    if (firstElementWithUpArrow) {
        console.log('第一个包含 ⇪ 的元素是:', firstElementWithUpArrow);
    } else {
        console.log('数组中没有包含 ⇪ 的元素。');
    }
    // 设置本周 MVP 信息
    const currentWeekName = document.querySelector('.current-week-name');
    const currentWeekDepartment = document.querySelector('.current-week-department');
    if (firstElementWithUpArrow) {
        currentWeekName.textContent = firstElementWithUpArrow[3];
        currentWeekDepartment.textContent = firstElementWithUpArrow[2];
    } else {
        currentWeekName.textContent = '暂无';
        currentWeekDepartment.textContent = '暂无';
    }

    // 设置本周最佳 信息
    const lastWeekName = document.querySelector('.last-week-name');
    const lastWeekDepartment = document.querySelector('.last-week-department');
    // 获取排名第一的同学的姓名和班级
    const firstStudent = center2[0];
    lastWeekName.textContent = firstStudent[2]; // 姓名在子数组的索引为 2
    lastWeekDepartment.textContent = firstStudent[1]; // 班级在子数组的索引为 1
</script>
<script type="text/javascript">
    name_num = num;
    const labelElement = document.querySelector('.title label');
    if (labelElement) {
        labelElement.textContent += name_num;
    }
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxbott'));
    option = {
        color: ['#00f1fc', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 20,
            right: 20,
            top: 0,
            bottom: 20
        },
        legend: {
            top: 2,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: left2
        },
        series: [{
            name: '饼图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: left2,
            // data: [
            //     {
            //         value: 21,
            //         name: 'A'
            //     },
            //     {
            //         value: 18,
            //         name: 'B'
            //     },
            //     {
            //         value: 15,
            //         name: 'C'
            //     },
            //     {
            //         value: 10,
            //         name: 'D'
            //     },
            //     {
            //         value: 3,
            //         name: 'E'
            //     },
            //     {value: 2, name: 'F'},
            //     {value: 1, name: 'G'}
            //
            // ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: true,
                formatter: '{b} : {c} ({d}%)'
            },
        }]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
    option = {
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 60,
            right: 60,
            top: 70,
            bottom: 40
        },
        toolbox: {
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            top: 10,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: ['上周提交', '本周提交', '增速']
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },

            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
            axisPointer: {
                type: 'shadow'
            }
        }],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max: 40,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '',
                max: 20,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    formatter: '{value} 个'
                }
            }
        ],
        series: [

            {
                name: '上周提交',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#b266ff'
                            },
                                {
                                    offset: 1,
                                    color: '#121b87'
                                }
                            ]
                        )
                    }
                },
                data: left3_data1,
                label: {
                    show: true,
                    position: 'top',
                    color: '#b266ff'
                },
            },
            {
                name: '本周提交',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00f0ff'
                            },
                                {
                                    offset: 1,
                                    color: '#032a72'
                                }
                            ]
                        )
                    }
                },
                // #00effe
                data: left3_data2,
                label: {
                    show: true,
                    position: 'top',
                    color: '#00effe'
                },
            },
            {
                name: '增速',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fffb34'
                            },
                                {
                                    offset: 1,
                                    color: '#fffb34'
                                }
                            ]
                        )
                    }
                },
                yAxisIndex: 1,
                data: left3_data3,
                label: {
                    show: true,
                    position: 'top',
                    color: '#fffb34'
                },
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart_1'));
    option = {
        // 单位
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}分"
        },
        legend: {
            x: 'center',
            y: '15%',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', '石家庄', '唐山'],
            icon: 'circle',
            textStyle: {
                color: '#fff',
            }
        },
        calculable: true,
        series: [{
            name: '',
            type: 'pie',
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [41, 100.75],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ['50%', '40%'],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: 'area',
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: '{c}分'
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length2: 1,
                },
                emphasis: {
                    show: true
                }
            },
            data: center1
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
<script type="text/javascript">
    // 获取表格元素
    const table = document.getElementById('myTable');

    // 定义表头（已经在HTML中存在thead部分，这里只是模拟解析表头列信息，实际可不做这步，直接使用已有thead结构）
    const headers = ["排", "班级", "姓名", "牛客名称", "牛客id", "名次", "学校", "AC", "总分", "时间"];

    // 数据部分，这里是示例数据，你可以替换成实际获取数据的方式（比如从接口获取等）
    const data = center2;
    /*const data = [
        ["1", "软件231", "赵俊锋", "锋front", "408232396", "786", "河池学院", "2", "175", "1:50:11"],
        ["2", "计技中222", "覃健庭", "NPC_of_EarthOnline", "726623220", "867", "河池学院", "1", "103.13", "1:03:31"],
        ["3", "计技中221", "卢永华", "阳光as", "445291084", "875", "河池学院", "2", "101.25", "1:32:29"],
        ["4", "软件232", "邱帥銘", "Mousennnn", "400320297", "910", "河池学院", "2", "87.04", "1:54:54"],
        ["5", "计技222", "吴玉海", "吴玉海", "206578392", "968", "河池学院", "1", "76.6", "1:54:19"],
        ["6", "软件232", "潘昊", "潘昊ph", "457352654", "970", "河池学院", "2", "75", "1:12:48"],
        ["7", "计技231", "农阳晨", "Maou逍遥", "742060430", "1178", "河池学院", "1", "43.29", "1:23:39"],
        ["8", "计技222", "李佳蔚", "diligent的懒羊羊", "222917009", "1237", "河池学院", "1", "35", "1:04:02"],
        ["9", "技计中221", "罗志斌", "Riven99", "48876146", "1464", "河池学院", "1", "25", "1:35:00"],
        ["10", "计技231", "杨孙贤", "杨孙贤", "517552178", "1464", "河池学院", "1", "25", "1:16:43"],
        ["11", "软件222", "黎珊珊", "彩塘", "542981108", "1464", "河池学院", "1", "25", "0:44:53"],
        ["12", "计技中221", "农鑫盛", "星蓝冲冲冲", "575408498", "1464", "河池学院", "1", "25", "0:19:44"],
        ["13", "计技中221", "吴成锫", "F_AK11", "602386296", "1464", "河池学院", "1", "25", "1:57:19"],
        ["14", "计技222", "杨思婷", "yy耶斯", "703497972", "1464", "河池学院", "1", "25", "1:38:20"],
        ["15", "计技中221", "陆明锐", "瓦工读后感", "706480812", "1464", "河池学院", "1", "25", "1:41:12"],
        ["16", "大数据232", "王恩婷", "云沫wet", "842682522", "1675", "河池学院", "0", "20.42", "1:25:14"],
        ["17", "计技231", "石才尚", "石才尚", "748938516", "1761", "河池学院", "0", "0", "0:00:00"]
    ];*/

    // 创建tbody元素
    const tbody = document.createElement('tbody');

    // 遍历数据数组，为每一条数据创建一行tr元素，并填充td元素（对应每列数据）
    data.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
            const cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    });

    // 将tbody添加到表格中
    table.appendChild(tbody);
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxtop'));
    option = {
        color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 10,
            right: 40,
            top: 0,
            bottom: 0,
            containLabel: true
        },
        calculable: true,
        series: [

            {
                name: '面积模式',
                type: 'pie',
                radius: [10, 70],
                center: ['50%', '50%'],
                roseType: 'area',
                data: right1,
                label: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)'
                },
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxmidd'));
    option = {
        color: ['#7de494', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',

        grid: {
            left: 30,
            right: 40,
            top: 30,
            bottom: 20,
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            data: right2_data1
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)",
                formatter: '{value} 人'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function (params) {
                var result = params[0].name + '<br/>';
                params.forEach(function (item) {
                    result += item.seriesName + ' : ' + item.value + '人<br/>';
                });
                return result;
            }
        },
        series: [{
            name: '',
            type: 'line',
            stack: '',
            areaStyle: {
                normal: {}
            },
            data: right2_data2,
            label: {
                show: true,
            }
        }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 获取表格元素
    const table2 = document.getElementById('myTable2');
    // 定义一个列表来存储表格数据，每一项对应表格中的一行数据
    // const tableDataList2 = window.center2;
    tableDataList2 = right3;
    // 创建tbody元素
    const tbody2 = document.createElement('tbody');

    // 遍历数据数组，为每一条数据创建一行tr元素，并填充td元素（对应每列数据）
    tableDataList2.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
            const cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        tbody2.appendChild(row);
    });

    // 将tbody添加到表格中
    table2.appendChild(tbody2);

</script>